<!--
 * @Author: 李天惊 uf_lee@163.com
 * @Date: 2022-10-27 13:07:28
 * @LastEditors: 李天惊 uf_lee@163.com
 * @LastEditTime: 2022-11-02 14:45:15
 * @FilePath: \grazlink20\uc_pc\src\components\Lee\Table\src\LeeTable2.vue
 * Copyright (c) 2022 by 李天惊 uf_lee@163.com, All Rights Reserved. 
 * 通用列表查询2（不用Table组件，用ElTable）
-->
<script setup lang="ts">
import { PropType, ref, unref } from 'vue'
import { ElImage, ElTable, ElTableColumn } from 'element-plus'
const multipleSelection = ref<any[]>([])
const props = defineProps({
  // 数据
  data: {
    type: Object as PropType<Nullable<any>>,
    default: () => null
  },
  // 结构（JSON）
  schema: {
    type: Array as PropType<any>,
    default: () => []
  }
})

// 字典通过value获取label
const getDictLabel = (dictData, value) => {
  let data = dictData.find((item) => {
    return item.value == value
  })
  return data ? data.label : ''
}
// console.log('getDictLabel', ElImage)
// const tableRef = ref<ComponentRef<typeof ElTable>>()
// const table = unref(tableRef)
const getData = () => {
  console.log('getData')
  console.log(111, unref)
}

const handleSelectionChange = (val: any[]) => {
  multipleSelection.value = val
}
defineExpose({
  getSelect: multipleSelection.value
})
</script>

<template>
  <ElTable
    :data="props.data"
    highlight-current-row
    style="width: 100%"
    @selection-change="handleSelectionChange"
  >
    <!-- ref="tableRef" -->
    <!-- @current-change="handleCurrentChange" -->
    <ElTableColumn type="selection" width="55" />
    <!-- <ElTableColumn type="selection" width="55">
      <template #header> 选择 </template>
    </ElTableColumn> -->
    <ElTableColumn
      v-for="(item, index) in schema"
      :key="index"
      :property="item.field"
      :label="item.label"
      :width="item.width"
    >
      <template v-if="item.component == 'Dict'" #default="scope">
        {{ getDictLabel(item.componentProps.options, scope.row[item.field]) }}
      </template>
      <template v-else-if="item.component == 'Image'" #default="scope">
        <!-- <div>{{ scope.row[item.field] }}</div> -->
        <ElImage :src="scope.row[item.field]" />
      </template>
    </ElTableColumn>
  </ElTable>
  <a @click="getData()">测试</a>
</template>
